<!DOCTYPE html>
<html lang="cmn-hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个网页</title>
</head>
<body>

<main>
    <h1>第一个<mark>网页</mark></h1><!--<mark> 标签定义带有记号的文本。-->
</main>
<!--超链接-->>
<nav><!--标签定义导航链接的部分。-->
<a href="http://www.baidu.com" title="百度">百度</a><!--超链接-->
</nav>
<p>The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.</p><!--缩写-->

<center><img src ="https://img02.sogoucdn.com/net/a/04/link?url=https%3A%2F%2Fi04piccdn.sogoucdn.com%2F9be4dae32deddc92&appid=122"></center>
<!--center用于使元素居中-->

<h1></h1><!--h$*6直接生成-->
<h2></h2>
<h3></h3><h4></h4><h5></h5><h6></h6>

输出hello world的Java语言
<code><!--定义计算机代码文本。-->
    <pre>
    public static void main(String args){
        Syetem.out.println("hello world");
    }
    </pre>
</code>

<i>i是斜体字</i>

<pre>
      小于号：&lt;；
      大于号: &gt;；
   </pre>

<p>hr 标签定义水平线：</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>

<p><acronym title="World Wide Web">WWW</acronym>


</p>
<p>在页面中空格用&nbsp;&nbsp;&nbsp;表示</p>

<p>请点击图像上的星球，把它们放大。</p>

<img
        src="https://www.w3school.com.cn/i/eg_planets.jpg"
        border="0" usemap="#planetmap"
        alt="Planets" />
<!--<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。-->
<map name="planetmap" id="planetmap"><!--map定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。-->
    <!--area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。-->
    <area
            shape="circle"
            coords="180,139,14"
            href ="https://www.w3school.com.cn/i/eg_sun.gif"
            target ="_blank"
            alt="Venus" />

    <area
            shape="circle"
            coords="129,161,10"
            href ="https://www.w3school.com.cn/i/eg_merglobe.gif"
            target ="_blank"
            alt="Mercury" />

    <area
            shape="rect"
            coords="0,0,110,260"
            href ="https://www.w3school.com.cn/i/eg_venus.gif"
            target ="_blank"
            alt="Sun" />

</map>

<ul>
    <li>用户名 <bdi>Bill</bdi>:80 points</li>
    <li>用户名 <bdi>Steve</bdi>: 78 points</li>
</ul>

<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>

<address>
    Written by <a href="https://space.bilibili.com">blibli个人空间</a>.<br>
    blibli个人空间<br>
    可以查看空间中的动态<br>
    每人都有自己的空间<br>
</address>

<p>这是普通文本 - <b>这是粗体文本</b>。</p>

<big>马叫</big><!--放大字号-->
<audio src="https://www.w3school.com.cn/i/horse.ogg" controls="controls" >
</audio>

<article>
    <h1>Internet Explorer 9</h1>
    <aside>IE9是微软的浏览器</aside>
    <p>Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14 日发布.....</p>
</article>

<p>
    如果浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；
</p>

Here comes a long quotation:

<blockquote>
    This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
</blockquote><!--浏览器在 blockquote 元素前后添加了换行，并增加了外边距。-->


<bdo dir="rtl">
    Here is some Hebrew text
</bdo>

<h4>这个表格有一个标题，以及粗边框：</h4>

<table border="6">
    <caption>我的标题</caption><!--caption 元素定义表格标题。caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。-->
    <tr>
        <td>100 <dialog open>这是打开的对话窗口</dialog></td><!--<dialog> 标签定义对话框或窗口。-->
        <td>200</td>
        <td>300</td>
    </tr>
    <tr>
        <td>400</td>
        <td>500</td>
        <td>600</td>
    </tr>
</table>



<div style="text-align:center;">
    <button onclick="playPause()">播放/暂停</button><!--button标记按钮-->
    <button onclick="makeBig()">大</button>
    <button onclick="makeNormal()">中</button>
    <button onclick="makeSmall()">小</button>
    <br />
    <video id="video1" width="420" style="margin-top:15px;">
        <source src="https://www.w3school.com.cn/example/html5/mov_bbb.mp4" type="video/mp4" />
        <source src="https://www.w3school.com.cn/example/html5/mov_bbb.ogg" type="video/ogg" />
        Your browser does not support HTML5 video.
    </video>
</div>

<script type="text/javascript">
    var myVideo=document.getElementById("video1");

    function playPause()
    {
        if (myVideo.paused)
            myVideo.play();
        else
            myVideo.pause();
    }

    function makeBig()
    {
        myVideo.width=560;
    }

    function makeSmall()
    {
        myVideo.width=320;
    }

    function makeNormal()
    {
        myVideo.width=420;
    }
</script>




<dl><!--<dl> 标签定义了定义列表（definition list）。<dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。-->
    <dt>计算机</dt><!--<dt> 标签定义了定义列表中的项目（即术语部分）。-->
    <dd>用来计算的仪器 ... ...</dd><!--<dd> 在定义列表中定义条目的定义部分-->
    <dt>显示器</dt>
    <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>


<embed src="/i/helloworld.swf" /><!--<embed> 标签定义嵌入的内容，比如插件-->


<details><!--detailsdi定义文档的细节-->
        <summary>HTML 5</summary><!--summary" 元素应该是 "details" 元素的第一个子元素。-->
        This document teaches you everything you have to learn about HTML 5.
    </details>


<form><!--<form> 标签用于为用户输入创建 HTML 表单。表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。表单用于向服务器传输数据。-->
    <fieldset><!--fieldset 元素可将表单内的相关元素分组。<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。-->
        <legend>健康信息</legend><!--legend 元素为 fieldset 元素定义标题（caption）。-->
        身高：<input type="text" /><!--<input> 标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。-->
        体重：<input type="text" />
    </fieldset>
</form>

<form>
    <label for="male">Male</label><!--<label> 标签为 input 元素定义标注（标记）。<label> 标签的 for 属性应当与相关元素的 id 属性相同。-->
    <input type="radio" name="sex" id="male" />
    <br />
    <label for="female">Female</label>
    <input type="radio" name="sex" id="female" />
</form>


<form action="/example/html5/demo_form.asp" method="get">
    用户名：<input type="text" name="usr_name" />
    加密：<keygen name="security" /><!--<keygen> 标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。-->
    <input type="submit" />
</form>


<figure><!--<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。-->
    <figcaption>黄浦江上的的卢浦大桥</figcaption><!--<figcaption> 标签定义 figure 元素的标题（caption）。-->
    <img src="https://www.w3school.com.cn/i/shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

<p>有序列表：</p>
<ol><!-- 有序列表-->
    <li>打开冰箱门</li>
    <li>把大象放进去</li>
    <li>关上冰箱门</li>
</ol>

<p>无序列表：</p>
<ul><!--无序列表-->
    <li>雪碧</li>
    <li>可乐</li>
    <li>凉茶</li>
</ul>

meter标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。<br>
<meter value="3" min="0" max="10">3/10</meter><br>
<meter value="0.6">60%</meter>



<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p><!--<del>定义文档中已被删除的文本,<ins>定义下划线的文本-->

<select><!--select 元素可创建单选或多选菜单。<select&> 元素中的 <option> 标签用于定义列表中的可用选项。select 元素是一种表单控件，可用于在表单中接受用户输入。-->
    <optgroup label="Swedish Cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option><!--option 元素定义下拉列表中的一个选项（一个条目）。-->
    </optgroup><!--optgroup 元素用于组合选项。当您使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易。相当于option的标题-->
    <optgroup label="German Cars">
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </optgroup>
</select>

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
    <input type="range" id="a" value="50">100
    +<input type="number" id="b" value="50">
    =<output name="x" for="a b"></output><!--执行计算然后在 <output> 元素中显示结果：-->
</form>

下载进度：<!--<progress> 标签标示任务的进度（进程）。-->
<progress value="22" max="100">
</progress>

</body>
</html>